<template>
  <view class="goods_item">
    <!-- 勾选状态 -->
    <radio color="red" :checked="good.goods_state" v-if="good.goods_count" @click="radioChange" />
    <!-- 左侧盒子 -->
    <view class="left-box"><image :src="good.goods_small_logo || defaultPic" mode="widthFix" class="goods_img"></image></view>
    <!-- 右侧盒子 -->
    <view class="right-box">
      <view class="goods_text">{{ good.goods_name }}</view>
      <view class="goods_info_box">
        <view class="goods_price">￥&nbsp;{{ good.goods_price }}</view>
        <uni-number-box v-if="good.goods_count" :value="good.goods_count" :min="1" @change="changeValue" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: ['good'],
  data() {
    return {
      defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
    };
  },
  methods: {
    radioChange() {
      this.$store.commit('cart/updateGoodsState', { goods_id: this.good.goods_id, goods_state: !this.good.goods_state, type: 1 });
    },
    changeValue(value) {
      this.good.goods_count = value - 0;
      this.$store.commit('cart/updateGoodsState', { goods_id: this.good.goods_id, goods_count: this.good.goods_count, type: 2 });
    }
  }
};
</script>
<style lang="scss">
.goods_item {
  display: flex;
  margin: 10px 5px;
  border-bottom: 1px solid #efefef;
  align-items: center;
  .left-box {
    .goods_img {
      width: 100px;
      display: block;
    }
  }
  .right-box {
    display: flex;
    height: 100px;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    .goods_text {
      font-size: 13px;
    }
    .goods_info_box {
      display: flex;
      justify-content: space-between;
      .goods_price {
        color: red;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
}
</style>
